<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="/static/css/login_and_register.css">
    <title>登录</title>
</head>
<body>

<!--动画动态效果-->
<div class="data-stream" style="left: 10%;">Spider...</div>
<div class="data-stream" style="left: 30%; animation-delay: -2s;">BeautifulSoup...</div>
<div class="data-stream" style="left: 50%; animation-delay: -4s;">WordCloud...</div>
<div class="data-stream" style="left: 70%; animation-delay: -1s;">Re...</div>
<div class="data-stream" style="left: 90%; animation-delay: -3s;">Csv...</div>

<div class="box">
    <div class="header">
        <h2><a href="/login">登录账号</a></h2>
        <h2><a href="/register">注册新用户</a></h2>
    </div>
    <form id="loginForm" method="post">
        <div class="input-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名">
        </div>
        <div class="input-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <button type="submit">登录</button>
    </form>
</div>

<div class="footer">
    &#xa9; 2025翟荟茹python期末作业
</div>

<script>
    const Form = document.getElementById('loginForm');
    Form.addEventListener('submit', function (event) {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        if (username === '' || password === '') {
            alert('请准确输入所有信息');
            event.preventDefault();
        }
    });
</script>
</body>
</html>